<template>
  <div>
    <div class="tb">
      <ul>
        <li v-for="(v, i) in arr" :key="i" @click="fun(i)">
          <img :src="v.img" alt="" />
          <p>{{ v.name }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import list from "@/api/link.js";
export default {
  methods: {
    fun(index) {
      switch (index) {
        case 2:
          this.$router.push("/vip");
          break;
        case 3:
          this.$router.push("/insurance");
          break;
      }
      console.log(index);
    },
  },

  data() {
    return {
      arr: [
        // {name:"账户" ,img:"./homes/k1.png"},
        // {name:"转账汇款",img:"./homes/k2.png"},
        // {name:"优惠活动",img:"./homes/k3.png"},
        // {name:"保险",img:"./homes/k5.png"},
        // {name:"账户" ,img:"./homes/k1.png"},
        // {name:"转账汇款",img:"./homes/k2.png"},
      ],
    };
  },
  mounted() {
    list("/list/list").then((ok) => {
      let data = ok.data.arr;
      console.log(data);
      this.arr = data;
    });
  },
};
</script>

<style lang="less" scoped>
.tb {
  width: 100%;
  height: 1.6rem;
  ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    li {
      width: 33%;
      height: 0.8rem;
      text-align: center;
      font-size: 0.12rem;

      p {
        font-size: 0.12rem;
        line-height: 0.2rem;
      }
      img {
        width: 0.3rem;
        height: 0.3rem;
        align-self: flex-end;
        margin-top: 0.15rem;
      }
    }
  }
}
</style>